<template>
  <div class="dashboard-layout">
    <!-- 顶部栏 -->
    <header class="top-bar">
      <h1>抖音直播数据可视化</h1>
      <div class="select">
        <div class="select-room_id">
          <div class="select-title">
            直播间
          </div>
          <el-select v-model="room_id" placeholder="请选择直播间号" style="width: 160px">
            <el-option v-for="item in room_id_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="select-analyzed_date">
          <div class="select-title">
            日期
          </div>
          <el-select v-model="analyzed_date" placeholder="请选择直播日期" style="width: 160px">
            <el-option v-for="item in analyzed_date_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div style="margin-left: 20px;">
        <el-button plain><a :href="'https://live.douyin.com/' + room_id" target="_blank">进入直播间</a></el-button>
      </div>
    </header>

    <div class="main-content">
      <!-- 侧边栏 -->
      <el-menu :default-openeds="['2']" default-active="1" class="sidebar" @select="handleSelect">
        <!-- 仪表板菜单项（可展开） -->
        <el-menu-item index="1">
          <el-icon>
            <TrendCharts />
          </el-icon>
          <span>数据总览</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Histogram />
            </el-icon>
            <span>数据分析</span>
          </template>
          <el-menu-item index="2-1">热度变化分析</el-menu-item>
          <el-menu-item index="2-2">用户行为分析</el-menu-item>
          <el-menu-item index="2-3">男女比例分析</el-menu-item>
        </el-sub-menu>
        <!-- 设置菜单项 -->
        <el-menu-item index="3">
          <el-icon>
            <Platform />
          </el-icon>
          <span>智能分析</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <InfoFilled />
          </el-icon>
          <span>关于本站</span>
        </el-menu-item>
      </el-menu>

      <!-- 主要内容区域 -->
      <main class="content">
        <component :is="currentComponent" :room_id="room_id" :analyzed_date="analyzed_date"></component>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, shallowRef } from 'vue'
import { TrendCharts, Histogram, Platform, InfoFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

import Overview from '@/components/MenuItem/Overview.vue'
import Heatview from '@/components/MenuItem/Heatview.vue'
import UserBehavior from '@/components/MenuItem/UserBehavior.vue'
import Genderview from '@/components/MenuItem/Genderview.vue'
import Smartview from '@/components/MenuItem/Smartview.vue'
import AboutView from '@/components/MenuItem/AboutView.vue'


const { appContext } = getCurrentInstance();
const HOST_URL = appContext.config.globalProperties.$HOST_URL;
let router = useRouter();
const route = useRoute();
let room_id = ref(route.query.room_id);
let analyzed_date = ref(route.query.analyzed_date);
let room_id_list = ref([]);
let analyzed_date_list = ref([]);

// 当前显示的组件
const currentComponent = shallowRef(Overview)

// 处理菜单选择
const handleSelect = (index) => {
  switch (index) {
    case '1':
      currentComponent.value = Overview
      break
    case '2':
    case '2-1':
      currentComponent.value = Heatview
      break
    case '2-2':
      currentComponent.value = UserBehavior
      break
    case '2-3':
      currentComponent.value = Genderview
      break
    case '3':
      currentComponent.value = Smartview
      break
    case '4':
      currentComponent.value = AboutView
      break
  }
}

// 定义函数，如果缺少room_id或analyzed_date,则从定向至首页http://localhost:8080/
const redirectToHome = () => {
  if (!room_id.value || !analyzed_date.value) {
    router.push('/');
  }
}

const fetchRoomIdList = async () => {
  try {
    const response = await axios.get(`${HOST_URL}/init/room/list`);
    room_id_list.value = response.data;
  } catch (error) {
    ElMessage.error('后端房间号列表请求失败');
    console.error('请求失败:', error);
  }
};

const fetchAnalyzedDateList = async (roomId) => {
  try {
    const response = await axios.get(`${HOST_URL}/init/date/list`, { params: { room_id: roomId } });
    analyzed_date_list.value = response.data;
  } catch (error) {
    ElMessage.error('后端日期列表请求失败');
    console.error('请求失败:', error);
  }
};

onMounted(() => {
  redirectToHome();
  fetchRoomIdList();
  fetchAnalyzedDateList(room_id.value);
})



// 监听room_id的变化,每当room_id变化时,重新获取analyzed_date_list
watch(() => room_id.value, (newRoomId) => {
  if (newRoomId) {
    fetchAnalyzedDateList(newRoomId).then(() => {
      if (analyzed_date_list.value.length > 0) {
        analyzed_date.value = analyzed_date_list.value[0].value;
      }
    });
  }
});


</script>

<style scoped lang="scss">
/* 去除链接下划线和鼠标悬停时的颜色 */
a {
  text-decoration: none;
  /* 去掉下划线 */
  color: inherit;
  /* 保持文字颜色继承自父元素 */
}

a:hover {
  color: inherit;
  /* 鼠标悬停时不改变颜色 */
  text-decoration: none;
  /* 保持去掉下划线 */
}

// 使select中的select-room_id和select-analyzed_date水平排列
.select {
  display: flex;
  justify-content: space-between;
  // 使select相对于header向右靠齐
  margin-left: auto;
}

// 使select-room_id和select-analyzed_date中的字竖直居中
.select-room_id {
  display: flex;
  align-items: center;
  // 字体调小
  font-size: 14px;
  // 增加右边距
  margin-right: 20px;
}

.select-analyzed_date {
  display: flex;
  align-items: center;
  // 字体调小
  font-size: 14px;
}

.select-title {
  // 增加右边距
  margin-right: 10px;
}



/* 整体布局样式 */
.dashboard-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 顶部栏样式 */
.top-bar {
  color: #377272;
  padding: 0 20px;
  height: 60px;
  /* 适中的高度 */
  display: flex;
  align-items: center;
  /* 设置下边框线 */
  border-bottom: 2px solid #e2e5ee;
}

.top-bar h1 {
  margin: 0;
  font-size: 1.5rem;
}

/* 主要内容区域样式 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  /* 防止出现滚动条 */
}

/* 侧边栏样式 */
.sidebar {
  width: 200px;
  height: calc(100vh - 60px);
  /* 减去顶部栏的高度 */
  overflow-y: auto;
  /* 允许垂直滚动 */
}

/* 内容区域样式 */
.content {
  flex: 1;
  overflow-y: auto;
  /* 允许垂直滚动 */
}

/* 确保图标和文字垂直对齐 */
.el-menu-item,
.el-sub-menu__title {
  display: flex;
  align-items: center;
}

.el-icon {
  margin-right: 5px;
}
</style>